<template>
  <div class="albums">
    <loading v-if="!thisUserInfo._id && !this.albumsData.length"></loading>
    <div v-else class="albums-wrapper">
      <div class="left">
        <user-info :userInfo="thisUserInfo" @sendMessage="_sendMessage"></user-info>
        <div class="user-albums-class" v-if="allAlbumsData.length">
          <div class="label">相册</div>
          <ul class="slide-item">
            <li v-for="(data,index) in allAlbumsData" :key="data._id" v-if="data.photosNumber">
              <div class="title" @click="showThisData(data._id)">
                <h4>{{data.name}}</h4>
                <span>
                  图片数：
                  <i>{{data.photosNumber}}</i>
                </span>
              </div>
              <p class="desc" v-if="data.desc">{{data.desc}}</p>
              <div
                class="tags"
                v-if="data.tags.length || (data.tags.length === 1 && !data.tags[0])"
              >
                <el-tag size="small" v-for="tag in data.tags" :key="tag.id" v-if="tag">
                  <span>{{tag}}</span>
                </el-tag>
              </div>
              <div class="time">
                <span>更新日期：{{data.updated | setDate}}</span>
              </div>
              <div class="class-child-skill">
                <ul>
                  <li
                    v-for="childrenData in data.children"
                    @click="gotoThisSkill(childrenData._id)"
                    :key="childrenData._id"
                  >
                    <span>{{childrenData.label}}</span>
                    <i>{{childrenData.type}}</i>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <bei></bei>
      </div>
      <div class="right">
        <div class="albums-data">
          <div class="title">
            <div class="name">
              <span>{{ albumsData.name }}</span>
              <span>({{ albumsData.photosNumber }}张)</span>
            </div>
            <div class="state">
              <span>
                状态：
                <i>{{ albumsData.state | setStateStyle }}</i>
              </span>
            </div>
          </div>
          <div class="tags">
            <el-tag v-for="tag in albumsData.tags" :key="tag">{{ tag }}</el-tag>
          </div>
          <div class="time">
            <span>
              创建时间：
              <i>{{ albumsData.created | setDate}}</i>
            </span>
            <span>
              更新时间：
              <i>{{ albumsData.updated | setDate }}</i>
            </span>
          </div>
          <div class="desc">
            <span>{{ albumsData.desc }}</span>
          </div>
        </div>
        <div class="photo-list">
          <ul v-if="albumsData.photos && albumsData.photos.length">
            <li v-for="child in albumsData.photos" :key="child._id" @click="openDrawer(child)">
              <div class="img" :style="setImage(child.photoUrl)"></div>
              <div class="text">
                <span>
                  <i v-if="child.photo.hot" class="el-icon-star-on"></i>
                  {{ child.photo.label}}
                </span>
              </div>
            </li>
          </ul>
        </div>
        <recommend-albums class="recommend"></recommend-albums>
      </div>
    </div>
    <el-drawer
      class="drawer"
      v-if="childPhoto._id"
      size="50%"
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
    >
      <div class="img">
        <img :src="childPhoto.photoUrl | setImageUrl" alt />
      </div>
      <div class="detail">
        <div class="label">
          <p>
            <i v-if="childPhoto.photo.hot" class="el-icon-star-on"></i>
            {{childPhoto.photo.label}}
          </p>
          <p class="time">
            上传时间：
            <i>{{childPhoto.created | setDate}}</i>
          </p>
        </div>
        <div class="body">
          <p>{{childPhoto.photo.body}}</p>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { setImage } from "@/public/setBgImage.js";
import { slider } from "@/public/slider.js";
import recommendAlbums from "@/views/blogs/navs/blog_photo/index.vue";
import { mapActions, mapState } from "Vuex";
import userInfo from "@/components/comment/userInfo.vue";
export default {
  name: "albums",
  components: {
    "user-info": userInfo,
    "recommend-albums": recommendAlbums
  },
  data() {
    return {
      thisUserInfo: {},
      albumsData: [],
      allAlbumsData: [],
      id: "",
      childPhoto: "",
      drawer: false
    };
  },
  mounted() {
    this.setImage = setImage;
  },
  activated() {
    this.id = this.$route.params.id;
  },
  watch: {
    id() {
      this.albumsData = [];
      this.thisUserInfo = {};
      this.allAlbumsData = [];
      this.initMethods();
    },
    $route(pre, now) {
      if (pre.name === "albums_id" && now.name === "albums_id") {
        this.id = this.$route.params.id;
      }
    }
  },
  computed: {
    ...mapState("user", ["userInfoData", "userName"])
  },
  methods: {
    openDrawer(data) {
      this.childPhoto = data;
      this.drawer = true;
    },
    showThisData(data) {
      this.$router.push("/albums/" + data);
    },
    initMethods() {
      this.getThisPhotos({ _id: this.id }).then(res => {
        this.albumsData = res.data.data[0];
      });
      this.getLookupInAlbums({ _id: this.id }).then(res => {
        this.thisUserInfo = res.data.data[0];
        this.allAlbumsData = res.data.data[0].albums;
        this.$nextTick(() => {
          slider(document.getElementsByClassName("slide-item")[0]);
        });
      });
    },
    _sendMessage() {
      // 给文章作者发送留言
      if (this.userName) {
        this.$prompt("请输入要发送的内容", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(({ value }) => {
            if (value) {
              this.sendMessageToUser({
                text: value,
                sendUserName: this.userInfoData.userName || this.userName,
                userName: this.thisUserInfo.userName,
                sendCoverUrl: this.thisUserInfo.coverUrl || ""
              })
                .then(res => {
                  this.$alert(res.data.data);
                })
                .catch(err => {
                  console.log("错误信息：" + err);
                });
            } else {
              alert("检测内容为空，未提交数据！");
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        alert("你还未登录，无法给作者留言！");
      }
    },
    ...mapActions("user", ["getThisPhotos", "getLookupInAlbums"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.albums
  width: 100%
  height: 100%
  background-color: #eee
  padding: 20px 0
  min-height: 93vh
  .albums-wrapper
    width: 1280px
    height: 100%
    margin: 0 auto
    @include flex(space-between,flex-start)
    .left
      flex: 0 0 25%
      overflow: hidden  
      .user-albums-class
        background-color: #fff
        margin-top: 10px
        .label
          width: 100%
          height: 40px
          padding-left: 10px
          font-size: 16px
          font-weight: 700
          @include flex(flex-start,center)
          @include title-before(5px,16px,12px,0px,#eb2001) 
        >ul
          padding: 0 10px
          width: 100%
          overflow: hidden
          >li
            width: 100%
            padding: 10px 0
            border-bottom: 1px solid #eee
            .title
              width: 100%
              cursor: pointer
              &:hover
                color: #eb2001
              @include flex(space-between,center)
            .desc
              width: 100%
              height: 30px
              line-height: 30px
              @include text-overflow()
            .tags
              width: 100%
              height: 32px
              line-height: 32px
              overflow: hidden
            .time
              width: 100%
              height: 30px
              line-height: 30px
    .right
      flex: 0 0 74%
      overflow: hidden
      background-color: #fff
      .albums-data
        width: 100%
        padding: 20px
        background-color: #f9f9f9
        box-shadow: 3px 3px 4px rgba(0,0,0,.1)
        .title
          width: 100%
          height: 40px
          @include flex(space-between,center)
          .name        
            >span
              margin-right: 10px
              &:first-child
                font-size: 21px
                color: #333
          .state        
            >span
              >i
                color: #eb2001
        .tags
          width: 100%
          overflow: hidden
          height: 40px
          line-height: 40px
          .el-tag
            margin-right: 10px
            width: 60px
            text-align: center
        .time
          width: 100%
          height: 40px
          @include flex(space-between,center)
          >span
            display: block
            >i
              color: #eb2001
        .desc      
          width: 100%
          height: 50px
          @include align(center)
          >span
            line-height: 25px
            overflow: hidden
            display: -webkit-box
            -webkit-box-orient: vertical
            -webkit-line-clamp: 2
      .photo-list
        width: 100%
        margin-top: 20px
        >ul
          width: 100%     
          padding: 0 5px     
          >li
            width: 19%
            height: 180px
            border: 1px solid #eee
            margin-right: calc(5%/4)
            display: inline-block
            margin-bottom: 20px
            overflow: hidden
            cursor: pointer
            &:nth-child(5n)
              margin-right: 0
            .img
              width: 100%
              height: 140px  
              position: relative
              cursor: pointer                
              overflow: hidden
              background-size: cover
              background-repeat: no-repeat
              background-position: 50% 50%
              &:hover
                background-size: contain       
            .text
              width: 100%
              height: 20%
              box-shadow: 2px 2px 3px rgba(0,0,0,.1) 
              background-color: #eee
              padding: 0 10px
              @include flex(center,center)
              >span
                font-size: 16px
                fotnt-weight: 700
      .recommend
        width: 100%
        border-top: 10px solid #eee
  .drawer
    .img
      width: 100%
      padding: 5%
      height: 80vh
      overflow: hidden
      @include flex(center,center)
      img
        max-height: 100%
        max-width: 100%
    .detail
      width: 100%
      padding: 5%
      height: 20vh
      background-color: #eee
      .label
        width: 100%
        height: 40px
        line-height: 40px
        font-size:18px
        @include flex(space-between,center)
        .time
          font-size: 14px
          i
            color: #eb2001
      .body
        width: 100%
        height: 60px
        padding-top: 10px
        @include align(center)
        >p
          overflow: hidden
          -webkit-line-clamp: 2
          display: -webkit-box
          color: #999
          line-height: 25px
          -webkit-box-orient: vertical
          width: 100%
</style>